<template>
  <div class="resume-en">
    <header>
      <div class="left">
        <h1 class="username">{{ headerData.userName }}</h1>
        <div class="details">
          <div
            class="detail-item"
            v-for="item in headerData.details"
            :key="item.label"
          >
            <div class="label">
              <svg
                v-if="item.label == 'Address'"
                t="1733842498636"
                class="yindu-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4445"
                width="16"
                height="16"
              >
                <path
                  d="M512 97.52381c175.055238 0 316.952381 140.312381 316.952381 313.392761 0 3.657143-0.073143 7.314286-0.219429 11.044572-3.900952 103.570286-61.805714 220.038095-156.842666 338.139428a1352.289524 1352.289524 0 0 1-148.382476 156.306286L512 926.47619l-11.50781-10.069333-13.824-12.531809a1352.289524 1352.289524 0 0 1-134.582857-143.774477c-95.012571-118.101333-152.917333-234.569143-156.818285-338.163809A292.08381 292.08381 0 0 1 195.047619 410.940952c0-170.715429 138.044952-309.540571 309.784381-313.295238L512 97.52381z m0 149.699047c-87.527619 0-158.47619 72.216381-158.47619 161.255619 0 89.039238 70.948571 161.231238 158.47619 161.231238s158.47619-72.167619 158.47619-161.231238c0-89.039238-70.948571-161.231238-158.47619-161.231238z m0 69.12c50.005333 0 90.550857 41.252571 90.550857 92.135619 0 50.883048-40.545524 92.135619-90.550857 92.135619s-90.550857-41.252571-90.550857-92.135619c0-50.883048 40.545524-92.135619 90.550857-92.135619z"
                  p-id="4446"
                  fill="#ffffff"
                ></path>
              </svg>
              <svg
                v-else-if="item.label == 'Mobile'"
                t="1733842575346"
                class="yindu-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5563"
                width="16"
                height="16"
              >
                <path
                  d="M260.8 634.88C144.32 495.68 88.96 352 108.8 241.28v-5.12c59.52-156.16 230.08-160 256-76.16L416 309.76a70.08 70.08 0 0 1-16.96 71.68l-51.2 51.2a474.56 474.56 0 0 0 233.6 234.56l43.2-43.2a70.08 70.08 0 0 1 66.56-18.56l172.8 42.88c81.92 23.36 87.68 192-79.04 261.44-173.44 48.32-404.16-131.84-524.16-274.88z"
                  fill="#ffffff"
                  p-id="5564"
                ></path>
              </svg>
              <svg
                v-else
                t="1733842620358"
                class="yindu-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8453"
                width="16"
                height="16"
              >
                <path
                  d="M960.000282 192.000282H64.000847c-35.346638 0-64.000094 28.653456-64.000094 63.999718v512.000376c0 35.346262 28.653456 63.999718 64.000094 63.999718h895.999435c35.347014 0 64.00047-28.653456 64.000471-63.999718V256c0-35.346262-28.653832-63.999718-64.000471-63.999718z m32.000612 63.999718v512a32.002117 32.002117 0 0 1-1.195117 8.658577 15.944049 15.944049 0 0 0-4.154311-5.364856l-314.253298-263.690367 314.253298-263.690367a16.05882 16.05882 0 0 0 2.049309-2.068124c2.109517 4.267952 3.300118 9.071751 3.300119 14.155137z m-32.000612-31.999859c0.195674 0 0.387961 0.011289 0.582507 0.014676l-406.769123 341.319912h-83.62545l-406.768747-341.319912c0.194169-0.003387 0.386456-0.014676 0.581378-0.014676h895.999435zM37.349663 771.293345a15.940286 15.940286 0 0 0-4.154311 5.364856 31.999483 31.999483 0 0 1-1.195117-8.658201v-512c0-5.083386 1.190601-9.886432 3.299742-14.154761a16.082903 16.082903 0 0 0 2.04931 2.068125l314.253297 263.68999-314.252921 263.689991z m26.650807 28.70689c-3.573686 0-7.006637-0.594548-10.215691-1.675271a16.002752 16.002752 0 0 0 4.133991-2.517798l318.575813-267.317111 75.299518 63.183908c2.934735 3.461173 7.312942 5.660625 12.206299 5.660625h95.999953c4.894109 0 9.27194-2.199452 12.206675-5.661378l75.298766-63.183155 318.575812 267.316735a15.994849 15.994849 0 0 0 4.133991 2.517798 31.935136 31.935136 0 0 1-10.216067 1.675647h-895.99906z"
                  fill="#ffffff"
                  p-id="8454"
                ></path>
              </svg>
              <span>{{ item.label }}：</span>
            </div>
            <span>{{ item.value }}</span>
          </div>
        </div>
      </div>
      <div class="picture">
        <img v-logo-error :src="headerData.user_logo" alt="" />
      </div>
    </header>
    <main>
      <ENBox title="Education">
        <div class="en-main-content">
          <div class="list">
            <div class="list-item" v-for="item in eduListData" :key="item.id">
              <div class="header divider-inside">
                <span>{{
                  `${item.start_year}/${item.start_month}-${item.end_year}/${item.end_month}`
                }}</span>
                <span>{{ item.company_title }}</span>
                <span>{{ item.position_name }}</span>
              </div>
              <div class="content divider-inside ">
                <div class="ql-editor no-padding" v-html="item.job_description"></div>
              </div>
            </div>
          </div>
        </div>
      </ENBox>
      <ENBox title="Work Experience">
        <div class="en-main-content">
          <div class="list h">
            <div
              class="item"
              v-for="item in workListData"
              :key="item.id"
            >
              <span>{{
                `${item.start_year}/${item.start_month}-${item.end_year}/${item.end_month}`
              }}</span>
              <span>
                {{ item.company_title }}
              </span>
              <span>
                {{ item.position_name }}
              </span>
            </div>
          </div>
        </div>
      </ENBox>
      <ENBox title="Honors&Awards">
        <div class="en-main-content">
          <div class="list h">
            <div
              class="item"
              v-for="item in honorListData"
              :key="item.id"
            >
              <div>
                {{ item.title }}
                ({{
                  `${item.start_year}.${item.start_month}-${item.end_year}.${item.end_month}`
                }})
              </div>
              <div class="">
                <div class="ql-editor no-padding" v-html="item.job_description"></div>
              </div>
            </div>
          </div>
        </div>
      </ENBox>
      <ENBox title="Self Evaluation">
        <div class="en-main-content divider-inside ">
          <div v-html="intentionData.objective" class="ql-editor no-padding"></div>
        </div>
      </ENBox>
    </main>
    <footer>
      <img src="./images/en_footer.jpg" alt="" />
    </footer>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import { useMemberStore } from "../../../../../store";
import ENBox from "./components/EN_box.vue";

const memberStore = useMemberStore();

const data: any = inject("resumeData");
const certificateList = data.value[0].data || [];
const intentionData = data.value[1].data;
const workListData = data.value[2].data || [];
const eduListData = data.value[3].data || [];
const skillsListData = data.value[4].data || [];
const honorListData = data.value[5].data || [];

const { mobile, en_address, email, headimgurl_base, last_name, first_name } =
  memberStore.profile!;

const headerData = ref({
  user_logo: headimgurl_base,
  userName: last_name+ ' ' + first_name,
  details: [
    {
      label: "Mobile",
      value: mobile,
    },
    {
      label: "Address",
      value: en_address,
    },
    {
      label: "E-mail",
      value: email,
    },
  ],
});
</script>
<style scoped lang="less">
@import url("./less/en.less");
header {
  font-size: 28px;
  background-color: #5d9ddb;
  color: #fff;
  padding: 75px;
  padding-bottom: 37.5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .left {
    flex: 1;
  }
  h1.username {
    font-size: 70px;
    margin-left: 22px;
    margin-bottom: 30px;
  }
  .details {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .detail-item {
    display: flex;
    align-items: center;
    vertical-align: bottom;
    .label {
      gap: 10px;
      display: flex;
      align-items: center;
    }
    svg {
      width: 28px;
      height: 28px;
    }
  }
  .picture {
    img {
      max-width: 250px;
      max-height: 250px;
      object-fit: cover;
    }
  }
}
main {
  display: flex;
  flex-direction: column;
  padding: 25px 75px;
  gap: 10px;
}
footer {
  padding-right: 75px;
  img {
    width: 100%;
  }
}
</style>
